500ピクセル幅のテンプレート　２

シンプルなテンプレ2

　width="500"（テーブル幅、500ピクセル）のテンプレート
楽天広場での使用では”自動改行無し”で使ってください！！

幅が500ピクセルのテーブルは楽天広場の場合、両サイドにサブ項目を表示させるレイアウトの設定をなさっていらっしゃる方に便利です。

サンプル２

商品名１

説明文１

商品名２

説明文２

商品名３

説明文３

商品名４

説明文4

商品名５

説明文５

商品名６

説明文６

商品名７

説明文７

商品名８

説明文８

コピペ用タグ

<table width="500" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="#FFCCFF">
<tr>
<td width="100" align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@1</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名１</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文１</td></tr></table>

</td>
<td width="100" align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@2</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名２</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文２</td></tr></table>

</td>
</tr>

<tr>
<td width="100" align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@3</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名３</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文３</td></tr></table>

</td>
<td align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@4</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名４</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文4</td></tr></table>

</td>
</tr>

<tr>

<td width="100" align="center" valign="center">
<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@5</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名５</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文５</td></tr></table>

</td>
<td align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@6</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名６</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文６</td></tr></table>

</td>
</tr>

<tr>
<td width="100" align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@7</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名７</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文７</td></tr></table>

</td>
<td align="center" valign="center">

<table width="100" height="100" border="0" cellpadding="2" cellspacing="0" style="border: 2px dotted #ffffff;"><tr><td align="center" bgcolor="#FFFFFF">　@8</td></tr></table>

</td>
<td width="150" align="center" valign="middle" bgcolor="#FFFFFF">

<table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td align="center" valign="top" bgcolor="#FFCCFF" style="border-bottom: 1px dotted #ffccff;"><strong>商品名８</strong></td></tr><tr><td align="left" valign="top" style="border-bottom: 1px dotted #ffccff;">説明文８</td></tr></table>

</td></tr>

</table>

タグ解説

*　のはコメントといってブラウザに表示されない記号です。
　ご自分でわかりやすいようにところどころに目印として使うと便利ですが、使いすぎるとその分文字数が増えますので注意してください。

*　テーブルの色を変える場合はそれぞれのカラーコードを変えればOKです。

ex.…　 bgcolor="#FFCCFF"（ピンク=現在の色）→ bgcolor="#333333"（グレー指定）→ bgcolor="#ff9900"(オレンジ指定)等

⇒　カラーコード一覧

*　テーブルの行数を増やすには
<!-４行目終了--->までをコピーし、のすぐ後にペーストします。
ペーストを繰り返すとその分だけ行が増えます。

*　テーブルの行数を減らすには
<!-４行目終了--->までを削除します。

２行減らすなら ～<!-４行目終了---> を削除します。

*　テーブル幅を変えるには width="500"の数値を変更します。”●●”を100%にするとトップページでは左右きっちりはまりますが、使用しているデザインテンプレートによっては間延びします。
フリーページでもwidth="100%"にすれば上部のタイトルバナーとサイズがぴったり合いますが、テンプレートは間延びします(^^;)

使い方サンプルとタグ